<template>
    <div class="edit">
        <my-header title="编辑资料" hasLeft="true" hasRight="true" @changeBack="toBack"></my-header>
        <div class="edit-warp">
            <div class="ava-box">
                <div class="avatar">
                    <img src="../../static/img/125.jpeg" alt="">
                    <span class="iconfont icon-xiangji"></span>
                    <input type="file">
                </div>
                <p>点击更换头像</p>
            </div>
            <div class="edit-box">
                <div class="edit-itme">
                    <span class="label">名字</span>
                    <span>名字<span class="icon">↶</span></span>
                </div>
                <div class="edit-itme">
                    <span class="label">抖音号</span>
                    <span>123456789<span class="icon">↶</span></span>
                </div>
                <div class="edit-itme">
                    <span class="label">简介</span>
                    <span>加油加油，快乐<span class="icon">↶</span></span>
                </div>
                <div class="edit-itme">
                    <span class="label">学校</span>
                    <span>点击设置<span class="icon">↶</span></span>
                </div>
                <div class="edit-itme">
                    <span class="label">性别</span>
                    <span>无<span class="icon">↶</span></span>
                </div>
                <div class="edit-itme">
                    <span class="label">生日</span>
                    <span>253-7-3<span class="icon">↶</span></span>
                </div>
                <div class="edit-itme">
                    <span class="label">地区</span>
                    <span>公元253年<span class="icon">↶</span></span>
                </div>
                <div class="edit-itme">
                    <span class="label">名字</span>
                    <span>点击设置<span class="icon">↶</span></span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import myHeader from '../../components/header/myHeader'
export default {
    data(){
        return{

        }
    },
    components:{
        myHeader
    },
    methods:{
        toBack(){
            this.$router.push('/me');
        }
    }
}
</script>
<style scoped>
    .edit{
        background-color:#101821 ;
    }
    .edit-warp{
        padding: 0 10px;
        box-sizing: border-box;
    }
    .ava-box{
        color: #ccc;
        text-align: center;
        padding: 20px;
    }
    .avatar{
        position: relative;
    }
    .avatar img{
        height: 100px;
        width: 100px;
        border-radius: 50%;
        margin-bottom: 16px;
        opacity: .5;
    }
    .avatar .iconfont{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        font-size: 26px;
        color: #fff;
    }
    .avatar input{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 50%;
        transform: translate(-50%,-50%);
        opacity: 0;
    }
    .edit-box{
        border-top: 1px #292831 solid;
        color: #ccc;
    }
    .edit-itme{
        display: flex;
        justify-content: space-between;
        line-height: 60px;
    }
    .edit-itme .label{
        color: #fff;
    }
    .edit-itme .icon{
        margin-left: 10px;
    }
</style>